<script setup lang="ts">
import { ref ,reactive} from 'vue';
import TaskAdd from './views/TaskAdd.vue';
import TaskList from "./views/TaskItem.vue";
import TaskFooter from './views/TaskFooter.vue';
// 自定义数据
  const data=reactive({
    list:[
    {
      id:1,
      isDone:false,
      title:'第一个任务',
    },{
      id:2,
      isDone:true,
      title:'第二个任务',
    },{
      id:3,
      isDone:false,
      title:'第三个任务',
    },
    {
      id:4,
      isDone:true,
      title:'第四个任务',
    }
  ]})
  let {list}=data
  // 首先分析项目 add属于子传父，所以需要父组件调用子组件的方法
  let add=(txt:string)=>{
    // console.log(txt);
    // 添加需要的是传入一个对象，数据中的所有key值
    list.unshift({
      id:Date.now(),
      isDone:false,
      title:txt,
    })
  }
  let changeChecked=(val:boolean)=>{
    list.forEach((item) => item.isDone = !val);
  }
  let delAll=()=>{
    console.log(111);
    
    // 还是那句话，在原数组上改变，得有赋值
    list=list.filter((item:any)=>{
      if(!item.isDone){
        return item;
      }
    })
  }
</script>
<template>
  <TaskAdd @add="add"/>
  <TaskList :list="data.list" @change-checked="changeChecked"/>
  <TaskFooter :list="data.list" @delAll="delAll"/>
</template>

<style>

</style>
